<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" indent="yes"/>

<xsl:include href="http://localhost:8080/wsd_assign2/header.xsl" />
<xsl:param name="page" select="1" />
<xsl:param name="pageSize" select="1" />
<xsl:param name="total" select="./result/total" />
<xsl:param name="pageCount" select="ceiling($total div $pageSize)" />
<xsl:param name="counter" select = "0" />
<xsl:param name="pageUrl"  />
<xsl:param name="title"  />
<xsl:template name="loop">
  <xsl:param name="var"></xsl:param>
  <xsl:choose>
    <xsl:when test="($var &lt;= 10 or $var &lt; ($page+6)) and $var &lt;= $pageCount">
    <xsl:if test="$var = $page">
     <li class="currentPage"><xsl:value-of select="$var" /></li>
     </xsl:if>
     <xsl:if test="$var != $page">
     <li class="otherPage"> <a href="main.jsp?page={$var}&amp;url={$pageUrl}&amp;xsl=items&amp;order=title"><xsl:value-of select="$var"></xsl:value-of></a></li>
     </xsl:if>
      <xsl:call-template name="loop">
        <xsl:with-param name="var">
        <xsl:number value="number($var)+1" />
        </xsl:with-param>
      </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
      
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<xsl:template match="items">
  <link type="text/css" rel="stylesheet" href="css/category.css" />	
  <link type="text/css" rel="stylesheet" href="css/items.css" />
   
  
  
  
  <div id="box">
		 <xsl:apply-templates/>   	 
  </div>
  
  <!-- Clear style float -->
  <div class="clearer"></div>
  
  <!-- Prev link for pagination -->
 <ul class="pageNoList">
      <xsl:choose>
       <xsl:when test="number($page) &gt; 1">
        
     <li class="otherPage"> <a><xsl:attribute name="href">main.jsp?page=<xsl:value-of select="number($page)-1"/>&amp;url=<xsl:value-of select="$pageUrl"></xsl:value-of>&amp;xsl=items&amp;order=title</xsl:attribute> &lt;&lt;Prev</a>
       </li>   
       </xsl:when>
       <xsl:otherwise>
        <li> <span class="inactiveButton">&lt;&lt;Prev</span></li>
       </xsl:otherwise>
      </xsl:choose>
      
<!-- Page Number bar -->
	
	 <xsl:call-template name="loop">
	 
	    <xsl:with-param name="var">
	    <xsl:if test="$pageCount &lt;= 10"><xsl:value-of select="1"/></xsl:if>
	    <xsl:if test="$pageCount &gt; 10 and $page &lt;= 5"><xsl:value-of select="1"/></xsl:if>
	    <xsl:if test="$pageCount &gt; 10 and $page &gt; 5 and $page &lt;= number($pageCount)-5"><xsl:value-of select="number($page)-4"/></xsl:if>
	    <xsl:if test="$pageCount &gt; 10 and $page &gt; number($pageCount)-5"><xsl:value-of select="number($pageCount)-9"/></xsl:if>
	    
	   </xsl:with-param>
	    
	    
	  </xsl:call-template>
  	
  	
 <!-- Next link for pagination -->  	
      
       <xsl:choose>
       <xsl:when test="number($page) &lt; $pageCount">
       <li class="otherPage"> <a>
         <xsl:attribute name="href">main.jsp?page=<xsl:value-of select="number($page)+1"/>&amp;url=<xsl:value-of select="$pageUrl"/>&amp;xsl=items&amp;order=title</xsl:attribute>
          Next&gt;&gt;
        </a>
        </li>
       </xsl:when>
       <xsl:otherwise>
        <li>
          <span class="inactiveButton">Next&gt;&gt;</span>
        </li>
       </xsl:otherwise>
      </xsl:choose>
      
      </ul>
 
</xsl:template>

<xsl:template match="item">
	<xsl:variable name="itemsURI"><xsl:value-of select="item_uri" /></xsl:variable>
	<xsl:variable name="itemId"><xsl:value-of select="id" /></xsl:variable>
	<xsl:variable name="imgUrl"><xsl:value-of select="thumbnail/url" /></xsl:variable>
	
	 
	 <a href="item.jsp?item_id={$itemId}">  
	 <!-- <a href="item.jsp?url={$itemsURI}">   --> 
	 <div class="example" id="box1">
	 <div class="row-img">
	 
	  <xsl:if test="$imgUrl != ''">
	    <img src="{$imgUrl}" width="100" height="100"></img>
	   </xsl:if>
	   <xsl:if test="$imgUrl=''" ><img src="img/cry-face-main.jpg" width="100" height="100"></img></xsl:if>
	  
	  </div>
	  <div class="row-title">
	  <h2><xsl:value-of select="title"/></h2>
	  </div>
	  <div class="row-summary">
	  
	   <xsl:value-of select="summary"/>

	  </div>
	  

</div>
</a>	
	
</xsl:template>

<xsl:template match="status"></xsl:template>
<xsl:template match="end"></xsl:template>
<xsl:template match="start"></xsl:template>
<xsl:template match="result/result"></xsl:template>
<xsl:template match="total"></xsl:template>

</xsl:stylesheet>
